package com.shenzhenai.jetpackcomposelayouts

import androidx.compose.foundation.Image
import androidx.compose.foundation.gestures.scrollable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.snapshotFlow
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import coil.annotation.ExperimentalCoilApi
import coil.compose.rememberImagePainter
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.launch

/**
 * @author huangzehui
 * @date 29/7/2025 下午10:50 周二
 * @description 列表的学习
 */

/**
 * Column 的使用，这种情况没有办法滚动，需要滚动，要做一些额外的处理，查看 SimpleColumn1
 */
@Composable
fun SimpleColumn() {
    Column {
        repeat(100) {
            Text(text = "Item #$it", style = MaterialTheme.typography.titleMedium)
        }
    }
}

/**
 * 使用 rememberScrollState 对 Column 进行滚动的启用
 *
 * 这种方式，也是不具备缓存功能的，类似 ScrollView
 */
@Composable
fun SimpleColumn1() {
    // 使用滚动状态进行一个滚动的行为
    val scrollState = rememberScrollState()
    Column(
        modifier = Modifier
            // 设置垂直滚动的状态
            .verticalScroll(scrollState)
    ) {
        repeat(100) {
            Text(text = "Item #$it", style = MaterialTheme.typography.titleMedium)
        }
    }
}

/**
 * LazyColumn 类似 ListView、RecyclerView
 */
@Composable
fun LazyList() {
    val scrollState = rememberLazyListState()
    LazyColumn(state = scrollState) {
        items(100) {
            Text(text = "Item #$it", style = MaterialTheme.typography.titleMedium)
        }
    }
}

/**
 * 外部控制列表滚动到顶部或底部
 */
@Composable
fun ScrollingList(innerPadding: PaddingValues) {
    val listSize = 100
    // LazyColumn 的滚动状态
    val scrollState = rememberLazyListState()
    // 获取一个协程作用域
    val coroutineScope = rememberCoroutineScope()

    val isShow = remember { mutableStateOf(true) }
    // 尝试使用LaunchedEffect 进行列表滚动卡顿的优化
    // https://cloud.tencent.com/developer/ask/sof/106569470
    LaunchedEffect(scrollState) {
        // Graph is first item
        snapshotFlow { scrollState.firstVisibleItemIndex }.collect {
            if (it != 0) {
                isShow.value = false
            } else {
                isShow.value = true
            }
        }
    }

    Column(modifier = Modifier.padding(innerPadding)) {
        Row {
            Button(
                modifier = Modifier
                    // 设置组件的权重值，类似 LinearLayout 的权重设置
                    .weight(1f),
                onClick = {
                    coroutineScope.launch {
                        // 滚动到顶部
                        scrollState.animateScrollToItem(0)
                    }
                }) {
                Text(text = "Scroll to the top")
            }

            Button(
                modifier = Modifier
                    // 设置组件的权重值，类似 LinearLayout 的权重设置
                    .weight(1f),
                onClick = {
                    coroutineScope.launch {
                        // 滚动到最后一个item
                        scrollState.animateScrollToItem(listSize - 1)
                    }
                }) {
                Text(text = "Scroll to the end")
            }
        }

        LazyColumn(state = scrollState) {
            items(listSize) {
//                ImageListItem(it, isShow.value)
                ImageListItem(it, true)
            }

        }

    }
}

@OptIn(ExperimentalCoilApi::class)
@Composable
fun ImageListItem(index: Int, isLoadPic: Boolean) {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Image(
            // rememberImagePainter 是 coil 的拓张，可以支持加载网络图片
            painter =
            if (isLoadPic) {
                rememberImagePainter(data = "https://media.istockphoto.com/id/502426696/zh/%E7%85%A7%E7%89%87/beautiful-seascape.webp?s=2048x2048&w=is&k=20&c=jFG05Z0_0CwQpHDZhsQrIE3CvtJWdhKdrrvvWnLiyCQ=")
            } else {
                painterResource(id = R.drawable.profile_picture)
            },
            contentDescription = null,
            modifier = Modifier.size(50.dp)
        )

        Spacer(modifier = Modifier.width(12.dp))

        Text(text = "Item #$index", style = MaterialTheme.typography.titleMedium)
    }
}